<template>
	<view class="my-shop">
		<view class="">

			<view class="nav-box">
				<view class="img">
					<image :src="shopMessage.shavatar" mode="aspectFill"></image>
				</view>
				<view class="shopName">
					<text @click="navTo1()" v-if="user_type">{{shopMessage.shname}}</text>
					<text v-else>{{shopMessage.shname}}</text>
					<view class="address" @click="navTo1()" v-if="user_type">
						<image src="/static/imgs/myStore/position.png" mode=""></image>
						<text>{{shopMessage.addres}}</text>
					</view>
					<view class="address person" v-else>
						<text class="iconfont">&#xe60b;</text>
						<text>{{shopMessage.phone}}</text>
					</view>
					<view class="play">
						<image src="/static/imgs/myStore/sound.png" mode=""></image>
						<text>{{shopMessage.shopdesc}}</text>
					</view>
				</view>
				<view class="count">
					<view class="count-btn" v-if="user_type">
						<text>{{shopMessage.creditnum_name}}</text>
					</view>

					<view class="count-title">
						<text>{{shopMessage.shop_collect_nums}}人关注</text>
					</view>
					
					<view class="msg-cont-right" v-if="whetherUser == false">
						<text @click="onButton" :class="['button',{buttonActive: buttonFlag}]">{{attention}}</text>
						<!-- <button @click="onButton" :class="['button',{buttonActive: buttonFlag}]">{{attention}}</button> -->
					</view>
					<!-- <view class="attent-box" v-if="whetherUser == false">
						<view class="attention"  v-if="shopMessage.is_attention == 0" @click="attentionShop">
							<text>+关注</text>
						</view>
						<view class="noAttention" v-if="shopMessage.is_attention == 1" @click="followShop()">
							<text>已关注</text>
						</view>
					</view> -->
				</view>
			</view>

			<!-- 左部导航栏及切换 -->
			<view class="ctry-content">
				<scroll-view class="nav-left" scroll-y>
					<block v-for="(item,index) in cateList" :key="index">
						<view class="nav-left-item" :class="item.cateid == navActiveID ? 'nav-active' : '' " @click="onCategory(item.cateid)">
							{{item.catename}}
						</view>
					</block>
				</scroll-view>

				<!-- 全部分类 -->
				<view class="nav-right">
					<!-- 顶部 -->
					<view class="top-img" @click="onSort">
						<view :class="['top-item',{'item-active': sortId == 1}]" id="1">
							按价格 <text class="iconfont" id="1">&#xe635;</text>
						</view>
						<view :class="['top-item',{'item-active': sortId == 2}]" id="2">
							按销量
						</view>
					</view>

					<scroll-view scroll-y="true" class="nav-right-content">
						<!-- 内容部分 -->
						<view class="nav-right-box" v-for="(item,index) in goodsList" :key="index">
							<view class="nav-right-item">
								<image :src="item.proimgs" mode="aspectFill"></image>
								<view class="right-box">
									<view class="right-content1" @click="navToProDetails(item)">
										<view class="title">
											<!-- 需要后端再给 -->
											<text>{{item.cate_name}}</text>
										</view>
										<view class="header">
											<text>{{item.pro_name}}</text>
										</view>
									</view>
									<view class="right-content2">
										<text>￥{{item.preprice}}</text>
									</view>
									<view class="right-content3">
										<text>￥{{item.nowprice}}</text>
										<view v-if="whetherUser == true">
											<view @click="del(item.proid,index)">
												<text>删除</text>
											</view>
											<view @click="edit(item.proid)">
												<text>编辑</text>
											</view>
										</view>
										<view class="shoppingCart" v-else @click.stop="JoinCart(item)">
											<image src="/static/split-new/shoppingCart.png" mode=""></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 加入购物车 -->
		<tui-bottom-popup class="tui-bottom" :show="joinCartPopup" @close="joinCartPopup=false">
			<view class="tui-share">
				<view class="buy-menu">
					<view class="menu-line1">
						<image :src="singleDetails.proimgs" mode="aspectFill"></image>
						<view class="line1-right">
							<text class="text1">￥<text class="text2">{{singleDetails.nowprice}}</text></text>
							<text class="text3">￥{{singleDetails.preprice}}</text> <br />
							<text class="text4">仅剩{{singleDetails.pronums}}件</text>
						</view>
						<text class="iconfont" @click="hideQS('QSPopup-cart')">&#xe628;</text>
					</view>
					<view class="menu-line2">
						<text>规格</text>
						<text>默认</text>
					</view>
					<view class="menu-line2">
						<text>购买数量</text>
						<tui-numberbox :value="value" :max="singleDetails.product_pronums" @change="change" class="number-box"></tui-numberbox>
					</view>
					<button type="primary" @click="onfinish">完成</button>
				</view>
			</view>
		</tui-bottom-popup>

	</view>
</template>

<script>
	// import QSPopup from '@/components/QS-popup/QS-popup.vue'; // 弹窗
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	import tuiNumberbox from "@/components/numberbox/numberbox"; // 数字选择
	export default {
		components: {
			tuiBottomPopup,
			tuiNumberbox
		},
		data() {
			return {
				whetherUser: false,
				navActiveID: 0, // 分类ID
				sortId: 1, // 排序ID
				goodsList: [], // 商品信息列表
				goodList: [], // 选中的分类数据--现在不需要
				cateList: [], // 分类名
				user_type: true, // true为企业店铺，false为个人店铺
				shopMessage: {}, // 店铺信息
				shopInfo: {},
				singleDetails: {},
				value: 1,
				joinCartPopup: false,
				buttonFlag: 0, // 是否关注
				attention: '+关注', // 关注
			};
		},
		onShow() {},
		onLoad(shid) {
			this.getCateList();
			if (shid.shid) {
				this.whetherUser = false
				this.shopInfo.shid = shid.shid
				
			} else {
				this.whetherUser = true
				this.shopInfo = uni.getStorageSync('lph-user-info');
			}
			let token = uni.getStorageSync('lph-token');
			if(token) {
				this.getGoodList();
				this.knowUserType();
				this.getShopMessage(); // 获取店铺信息
			}
			
			
		},
		onPullDownRefresh() {
			this.getGoodList();
		},
		methods: {
			async onButton() { // 关注的操作
				if (!this.buttonFlag) { // 去关注的
					let a = await this.$http.setShopFollow({
						shid: this.shopMessage.shid
					});
					if (a.code == 200) {
						uni.showToast({
							title: a.message,
							icon: 'none'
						})
						this.buttonFlag = !this.buttonFlag;
						this.attention = '已关注';
						return
					}
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					return
				}
				// 取消关注的
				let a = await this.$http.setNotShopFollow({
					shid: this.shopMessage.shid
				});
				if (a.code == 200) {
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					this.buttonFlag = 0;
					this.attention = '+关注';
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
			},

			// async attentionShop(){
			// 	let res = await this.$http.attentionShop({
			// 		shop_id:this.shopInfo.shid
			// 	});
			// },
			// async followShop(){
			// 	let res = await this.$http.followAttentionShop({
			// 		shop_id:this.shopInfo.shid
			// 	});
			// },
			//添加到购物车
			async onfinish() {
				let res = await this.$http.addProCart({
					product_id: this.singleDetails.proid,
					shop_id: this.shopInfo.shid,
					quantity: this.value,
					delivery_type: 1
				});
				if (res.code == 200) {
					this.joinCartPopup = false
				}
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			},
			hideQS(ref) { //  隐藏弹窗
				this.joinCartPopup = false
			},
			change: function(e) { // 数字选择
				this.value = e.value
			},
			JoinCart(item) {
				this.singleDetails = item
				console.log(this.singleDetails)
				this.joinCartPopup = true
			},
			navToProDetails(item) {
				let id = item.proid
				uni.navigateTo({
					url: '/pages/detail/detail?proid=' + id
				})
			},
			async getShopMessage() {
				let aa = uni.getStorageSync('lph-ll');
				let a = await this.$http.getShopMessage({
					lng: aa.long,
					lat: aa.lat,
					shid: this.shopInfo.shid
				});
				this.shopMessage = a.data;
				if(this.shopMessage.shtype == 1){
					this.user_type = false;
				}
					let b = uni.getStorageSync('lph-user-info').user_type;
				if (b == 2) {
					this.user_type = false;
				}
			},

			async getCateList() { //分类列表
				let a = await this.$http.getCateList();

				if (!this.user_type) { // 需要做更改 -- 判断个人与商铺
					this.cateList = a.data.slice(0, 1);
					this.cateList = this.cateList.concat(a.data.slice(4, 6));
					return
				}
				this.cateList = a.data;
			},
			del(id, index) { //删除商品
				let _self = this
				uni.showModal({
					content: "是否删除商品",
					success(e) {
						if (e.confirm) {
							_self.$http.delProduct({ // 删除接口的
								productId: id
							}).then((val) => {
								uni.showToast({
									title: val.message,
									icon: 'none'
								})
								_self.goodsList.splice(index, 1);
							}, (val) => {
								uni.showToast({
									title: val.message,
									icon: 'none'
								})
							})
						}
					}
				});
			},
			edit(id) { //编辑商品
				this.navTo(id);
			},
			// nav路由跳转
			navTo(id) {
				if (this.navActiveID == 9) {
					uni.navigateTo({
						url: `/pages/myStore/goods/release-ttc?productId=${id}`
					})
					return
				} else if (this.navActiveID == 10) {
					uni.navigateTo({
						url: `/pages/myStore/goods/release-ershou?productId=${id}`
					})
					return
				}
				uni.navigateTo({
					url: `/pages/myStore/goods/release?productId=${id}`
				})
			},
			async getGoodList() { //商品信息列表
				let b = {
					sort_type: 'desc',
					procate: this.navActiveID,
					type: this.sortId,
					shid: this.shopInfo.shid
				}
				let a = await this.$http.getProductSort(b);
				this.goodsList = a.data;
				uni.stopPullDownRefresh();
			},
			onCategory(id) { // 点击分类切换
				this.navActiveID = id;
				this.getGoodList();
			},
			onSort(e) { // 排序
				this.sortId = e.target.id;
				this.getGoodList();
			},
			navTo1() {
				if(this.shopMessage.shtype == 1){
					return
				}
				let item = {}
				item.shid = this.shopInfo.shid
				item.whetherUser = this.whetherUser
				item.is_attention = this.singleDetails.is_attention
				uni.navigateTo({
					url: '/pages/user/storedetails?item=' + JSON.stringify(item)
				})
			},
			knowUserType() { // 判断用户类型
				
				let a = uni.getStorageSync('lph-user-info');
				if (a.user_type == 3) {
					this.user_type = true;
					return
				}
				this.user_type = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import 'static/css/goodsDetail.scss';
	@import 'static/css/myShop.scss';

	.msg-cont-right {
		float: right;
		margin-right: 0rpx;
		// margin-top: 70rpx;
		.button {
			// margin-top: 40rpx;
			padding-bottom:40upx;
			font-size: 26rpx;
			width: 120rpx;
			height: 40rpx;
			// line-height: 50rpx;
			color: #fff;
			background: rgb(255, 85, 125);
			text-align: center;
			border-radius: 40rpx;
		}

		.buttonActive {
			border: 2upx solid $bg02;
			background-color: #fff;
			color: $bg02;
		}

		text {
			display: inline-block;
			// margin-top: -40rpx;
			padding-bottom: 50upx;
			font-size: 26rpx;
			width: 120rpx;
			// height: 40rpx;
			// line-height: 50rpx;
			color: #fff;
			background: rgb(255, 85, 125);
			text-align: center;
			border-radius: 40rpx;
		}
	}

	.tui-share {
		width: 100%;
		background-color: #fff;
		padding: 46upx 0 110upx;
	}

	.buy-menu {
		// 底部购买菜单
		width: 100%;

		background-color: #fff;
		border-radius: 20upx 20upx 0upx 0upx;
		padding: 0 30upx 30upx;
		position: relative;
		overflow: hidden;

		.menu-line2 {
			padding: 0 30upx;
			line-height: 100upx;

			text {
				&:first-child {
					font-size: 30upx;
					color: $color3;
				}

				&:last-child {
					font-size: 24upx;
					color: $color9;
					margin-left: 20upx;
				}
			}

			.number-box {
				float: right;
				width: 200upx;
				height: 50upx;
				line-height: 50upx;
				margin-top: 26upx;
			}

		}

		button {
			margin-top: 20upx;
			@include button(600upx, 72upx, 72upx, 36upx, none, $bg02, #fff, 36upx)
		}

		.menu-line1 {
			display: flex;
			margin-top: 30upx;
			padding-bottom: 30upx;
			border-bottom: 2upx dashed $color9;

			image {
				min-width: 176upx;
				max-width: 176upx;
				height: 176upx;
			}

			.iconfont {
				position: absolute;
				top: 40upx;
				right: 40upx;
				font-size: 28upx;
				color: $color6;
			}

			.line1-right {
				margin-left: 20upx;
				padding-top: 46upx;

				.text1 {
					font-family: din;
					font-size: 40upx;
					font-weight: 400;
					color: $bg02;
				}

				.text2 {
					font-size: 50upx;
					font-family: din;
					font-weight: 400;
				}

				.text3 {
					font-size: 20upx;
					text-decoration: line-through;
					color: $color9;
				}

				.text4 {
					font-size: 24upx;
					color: #ffaa00;
				}
			}


		}


	}
</style>
